<template>
    <div class="manual">
        <div class="manualCon">
            <p>4.个人特征与管理风格倾向</p>
            <div class="ltop">
                <span>该候选人最擅长于以下</span>
                <div class="lInp">
                    <el-input v-model="number" size="mini" placeholder="1"></el-input>
                </div>
                <span>项个性特征与行为特征（数字不超过4）</span>
            </div>
            <div class="lcenter">
                <span>影响性:</span>
                <div class="lInpA">
                    <el-input
                            size="small"
                            v-model="input">
                    </el-input>
                </div>
            </div>
            <div class="lcenter">
                <span>情感性:</span>
                <div class="lInpA">
                    <el-input
                            size="small"
                            v-model="input">
                    </el-input>
                </div>
            </div>
            <div class="lcenter">
                <span>独立性:</span>
                <div class="lInpA">
                    <el-input
                            size="small"
                            v-model="input">
                    </el-input>
                </div>
            </div>
            <div class="lcenter">
                <span>自律性:</span>
                <div class="lInpA">
                    <el-input
                            size="small"
                            v-model="input">
                    </el-input>
                </div>
            </div>
            <div class="lbtn">
                <button>保存</button>
                <button>取消</button>
            </div>
        </div>
        <div class="manualCon">
            <p>5.优劣势分析</p>
            <div class="lcenter">
                <span>优势:</span>
                <div class="lInpA lst">
                    <el-input
                            size="small"
                            v-model="input">
                    </el-input>
                </div>
            </div>
            <div class="lcenter">
                <span>劣势:</span>
                <div class="lInpA lst">
                    <el-input
                            size="small"
                            v-model="input">
                    </el-input>
                </div>
            </div>
            <div class="lbtn">
                <button>保存</button>
                <button>取消</button>
            </div>
        </div>
        <div class="manualCon">
            <p>6.核心胜任力构成</p>
            <div class="ltop">
                <span>该候选人最擅长于以下</span>
                <div class="lInp">
                    <el-input v-model="input" size="mini" placeholder="2"></el-input>
                </div>
                <span>个核心胜任力（数字不超过7）</span>
            </div>
            <div class="lcenter">
                <span>人际理解力:</span>
                <div class="lInpA">
                    <el-input
                            size="small"
                            v-model="input">
                    </el-input>
                </div>
            </div>
            <div class="lcenter">
                <span>影响力:</span>
                <div class="lInpA lst">
                    <el-input
                            size="small"
                            v-model="input">
                    </el-input>
                </div>
            </div>
            <div class="lcenter">
                <span>沟通协调能力:</span>
                <div class="lInpA">
                    <el-input
                            size="small"
                            v-model="input">
                    </el-input>
                </div>
            </div>
            <div class="lcenter">
                <span>团队领导能力:</span>
                <div class="lInpA">
                    <el-input
                            size="small"
                            v-model="input">
                    </el-input>
                </div>
            </div>
            <div class="lcenter">
                <span>责任感:</span>
                <div class="lInpA lst lst2">
                    <el-input
                            size="small"
                            v-model="input">
                    </el-input>
                </div>
            </div>
            <div class="lcenter">
                <span>分析思维:</span>
                <div class="lInpA lst">
                    <el-input
                            size="small"
                            v-model="input">
                    </el-input>
                </div>
            </div>
            <div class="lcenter">
                <span>计划组织能力:</span>
                <div class="lInpA">
                    <el-input
                            size="small"
                            v-model="input">
                    </el-input>
                </div>
            </div>
            <div class="lbtn">
                <button>保存</button>
                <button>取消</button>
            </div>
        </div>
        <div class="manualCon">
            <p>7.推荐建议</p>
            <div class="lcenter">
                <div class="lInpA">
                    <el-input
                            size="small"
                            type="textarea"
                            :rows="2"
                            placeholder="请输入内容"
                            v-model="textarea">
                    </el-input>
                </div>
            </div>
            <div class="lbtn">
                <button @click="doSave">保存</button>
                <button>取消</button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "manual",
        data() {
            return {
                input: '',
                number:'',
                textarea:'',
            }
        },
        methods:{
            doSave(){
                //    点击保存后生成候选人简历报告,跳转的页面
                this.$router.push('/ReportModel')
            }
        }
    }
</script>

<style scoped>
    .manual {
        display: flex;
        flex-direction: column;
    }

    .lInp {
        width: 36px;
        height: 18px;
        margin-left: 5px;
        margin-right: 5px;
    }

    .ltop, .lcenter {
        display: flex;
        flex-direction: row;
    }
    /*.lcenter{*/
        /*position: relative;*/
    /*}*/
    .lInpA {
        width: 492px;
    }

    .manualCon {
        display: flex;
        flex-direction: column;
        margin-top: 10px;
        margin-left:35px;
        margin-bottom: 10px;

    }

    .manualCon > div {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .lcenter > span {
        margin-right: 10px;
    }
    .lbtn{
        width:550px;
        height: 30px;
        /*border: 1px solid pink;*/
        text-align: right;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .lbtn > button {
        width: 126px;
        height: 23px;
        border: 1px solid #797979;
        background: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#dedede));
    }

    .lbtn > button:nth-child(1) {
        margin-right: 10px;
    }
    .lst{
        margin-left:36px;
    }
    .lst2{
        margin-left:46px;
    }
</style>
